<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>pig书屋--用户注册</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all">
	<link rel="stylesheet" type="text/css" href="css/qian.css" media="all">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<%@ include file="include/top.jsp" %>

		<div class="content" style="margin:0px 10px;">
			<ul class="breadcrumb">
			  <li><a href="/home.action">首页</a> <span class="divider">/</span></li>
			  <li class="active">用户注册</li>
			</ul>
			<c:if test="${param.code==10002}">
				<div class="alert alert-error">
				  <button type="button" class="close" data-dismiss="alert">&times;</button>
				  <strong>验证码错误，请重新输入</strong>
				</div>
			</c:if>
			<form class="form-horizontal fm" method="post" action="/regaccount.action" >
			  <div class="control-group">
			    <label class="control-label" for="inputEmail"><i class="icon-asterisk" style="font-size:8px;"></i>邮箱</label>
			    <div class="controls">
			      <input type="text" id="inputEmail" placeholder="邮箱" name="user.email">
			    </div>
			  </div>
			  <div class="control-group">
			    <label class="control-label" for="inputUsername"><i class="icon-asterisk" style="font-size:8px;"></i>用户名</label>
			    <div class="controls">
			      <input type="text" id="inputUsername" placeholder="用户名" name="user.username">
			    </div>
			  </div>
			  <div class="control-group">
			    <label class="control-label" for="inputPassword"><i class="icon-asterisk" style="font-size:8px;"></i>密码</label>
			    <div class="controls">
			      <input type="password" id="inputPassword" placeholder="密码" name="user.pswd">
			    </div>
			  </div>
			  <div class="control-group">
			    <label class="control-label" for="inputEmail"><i class="icon-asterisk" style="font-size:8px;"></i>确认密码</label>
			    <div class="controls">
			      <input type="password" id="inputRePassword" placeholder="确认密码" name="repswd">
			    </div>
			  </div>
			  <!-- 使用组件提供的方法做验证码 -->
			  <div class="control-group">
			  	<label class="control-label" for="input"><i class="icon-asterisk" style="font-size:8px;"></i>请输入验证码：</label>
			    <div class="controls">
			    	<img alt="" src="jcaptcha.jpg" id="img" style="width:170px;height:60px;"/>
					<a href="javascript:;" id="showImg">看不清？换一张</a><br>
					<input type="text" class="span2" name="validatecode"><br/>
				</div>
			  </div>
			  <div class="control-group">
			    <div class="controls">
			      <!-- <label class="checkbox"> -->
			        <input type="checkbox" name="isCheck"><br>我已阅读并同意用户注册协议<br>
			      <!-- </label> -->
			      <button type="button" class="btn btn-warning">注册</button>
			    </div>
			  </div>
			</form>
		</div>
		
		<%@ include file="include/foot.jsp" %>
	</div>
	
	<script src="js/validate/jquery.validate.js"></script>
	<script>
		/* jquery.validate.js插件的用法，自己给每个验证写提示 */
    	$(function(){
    		//在验证之前将昵称中的中文转码，验证的时候是get方式发送
    		$("#inputUsername").val(encodeURIComponent($("#inputUsername").val()));
    	
    		$(".fm").validate({
    			rules:{
    				'user.email':{
    					required:true,
    					email:true,
    					/* 远程验证，请求emial.action，看注册的这个邮箱在database中是否已经存在 */
    					remote:'/validate/email.action'
    				},
    				'user.username':{
    					required:true,
    					remote:'/validate/username.action'
    				},
    				'user.pswd':{
    					required:true,
    					rangelength:[6,18]
    				},
    				'repswd':{
    					required:true,
    					rangelength:[6,18],
    					equalTo:'#inputPassword'
    				},
    				'isCheck':{
    					required:true
    				}/* ,
    				'validatecode':{
    					required:true,
    					remote:'/validate/validatecode.action'
    				} */
    				//验证码在这里用Ajax验证会出错，所以放到服务端验证了。
    			},
    			messages:{
    				'user.email':{
    					/* 上面对应的值为true时，显示下面对应的字符串 */
    					required:'请输入电子邮件账号',
    					email:'电子邮件格式错误',
    					remote:'该电子邮件已注册'
    				},
    				'user.username':{
    					required:'请输入昵称',
    					remote:'该昵称已被占用'
    				},
    				'user.password':{
    					required:'请输入密码',
    					rangelength:'密码长度6~18位'
    				},
    				'repassword':{
    					required:'请输入确认密码',
    					rangelength:'密码长度6~18位',
    					equalTo:'两次密码不一致'
    				},
    				'isCheck':{
    					required:'未同意不能注册'
    				}/* ,
    				'validatecode':{
    					required:'请输入验证码',
    					remote:'验证码输入错误'
    				} */
    			}
    		});
    		$(".btn").click(function(){
    			$(".fm").submit();
    		});
    		
    		//验证码
    		$("#showImg").click(function(){
				$("#img").attr("src","jcaptcha.jpg?xx="+Math.random());
			});
    		
    	});
	</script>
</body>
</html>